<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
    .countDiv input[type='button'] {
	    height: 30px;
	    line-height: 30px;
	    width: 30px;
	    text-align: center;
	    background: #1074F1;
	    color: #fff;
	    font-size: 20px;
	    margin-top:1px;
	}
	
.countDiv input[type='text'] {
    margin:0 3px;
    width: 35px;
    height: 28px;
    line-height: 30px;
    border: 1px solid #ccc;
    font-size: 13px;
    padding:0
}
@media screen and (max-width: 370px) {
   .countDiv input[type='text'] {
    	width: 30px;
	}
	.sCarImg{
		height:80px;width:80px;
	}
}
    
    </style>
</head>
<body ontouchstart="">

<div class="detailTop pf w100 of">
    <div class="w100 of tc cf  flexBox">
		<a href="javascript:history.back();" class="db f14 tl pr" style="width:19%;">
     		<img src="mb/images/top_back_white.png" class="pa" style="height: 40px;width: 40px;top:-20px">
        </a>
      	<p class="f18 tc" style="width:54%;">购物车</p>
       <a id="editBtn" href="javascript:editFunc($('.countDivNum'),$('.countDivInput'))" class="db of f14 tr" style="margin-right: 4%;">
           		编辑
        </a>
         <a id="finishBtn" href="javascript:finishFunc($('.countDivNum'),$('.countDivInput'))" class="db of f14 tr" style="margin-right: 4%;display:none;">
           		完成
        </a>
    </div>
</div>

<div  id="container" class="container db jz mgt45">
<!-- 		<section class="w88 jz bcf df of mgt10" style="padding:14px 3%">
			<div class="circle sCarDotChexck" style="flex-shrink:0"></div>
			<div class="mgl3 sCarImg" style="flex-shrink:0">
				<img src="mb/images/product1.jpg" class="db w100 h100">
			</div>
			<article class="mgl3" style="align-self: flex-start;height:90px;">
				<div class="flexBox h100" style="flex-direction:column;align-items: flex-start;">
					<p class="c3 f14">日本喜阅餐厅进口天妇罗真空包两袋装</p>
					<div class="flexBox w100">
						<p class="orange f15 mgt10">&yen;123430</p>
						<div class="countDiv clearfix of flexCenter">
							 <input id="minus" name="" type="button" value="-">
							  <input id="count" name="" type="text" value="1" onkeyup="value=this.value.replace(/\D+/g,'')" class="count bcf tc">
							  <input id="add" name="" type="button" value="+" style="margin-left: 3px;">
						</div>
					</div>
				</div>
			</article>
		</section>
		
		<section class="w88 jz bcf flexBox of mgt10" style="padding:14px 3%">
			<div class="df">
				<div class="circle sCarDot" style="flex-shrink:0"></div>
				<div class="mgl3 sCarImg" style="flex-shrink:0">
					<img src="mb/images/product1.jpg" class="db w100 h100">
				</div>
			</div>
			<article class="mgl3" style="align-self: flex-start;height:90px;">
				<div class="flexBox h100" style="flex-direction:column;align-items: flex-start;">
					<p class="c3 f14">日本喜阅餐厅进</p>
					<div class="flexBox w100">
						<p class="orange f15 mgt10">&yen;123430</p>
						<div class="countDiv clearfix of flexCenter">
								&times;1
						</div>
					</div>
				</div>
			</article>
		</section> -->
</div>
<section class="pf w100 bcf" style="left:0;bottom:0;z-index:2;">
	<div class="w100 flexBox" style="line-height:40px;">
		<div class="df" onclick="selectAll($('#selectAllBtn'),$('.circle'));">
			<div id="selectAllBtn" class="circle sCarDot mgl10" style="flex-shrink:0"></div>
			<p class="c6 f14 mgl10">全选</p>
		</div>
		<div id="bottomBtnTotal" class="df">
			<p class="c3 f14">合计：</p>
			<p class="orange f15">&yen;<span id="MoneyTotal">0.00</span></p>
			<a href="javascript:buy($('#MoneyTotal').html(),$('.sCarDotChexck'));" class="btnBlue cf f15 tc db mgl10" style="width:100px;">结算</a>
		</div>
		<div id="bottomBtnDelete" class="df" style="display:none;">
			<a href="javascript:deleteCar($('.sCarDotChexck'));" class="btnOrange cf f15 tc db mgl10" style="width:100px;">删除</a>
		</div>
	</div>
</section>

<script type="text/javascript" src="mb/js/websql.js"></script>
<script type="text/javascript" src="mb/js/Base64.js"></script>
<script type="text/javascript">
	var priceAll = 0;
	
    $(document).ready(function(){
    	//清空数据
    	var restStr = 
			    	 '<div id="resText"></div><!--resText-->'
				        +'<div id="loading" class="w100">'
				            +'<img src="mb/images/loading.gif" alt="正在加载" class="db jz hauto" style="width: 15px;">'
				            +'<div class="w100 tc f10 c9">正在加载</div>'
				        +'</div>';
    	$("#container").html(restStr);
    	
    	
    	/* 新建或者打开数据库 */
        websqlOpenDB(); 
        websqlCreatTable(websqlTable);
        
        /* 获取数据 */
        websqlGetAllData(websqlTable,appendData);
        
    
	});
	
    	/*将数据展示到页面 */
     /* PROID,NAME,PRICE,NUM,IMGURL,GUIGE */
    var appendData = function(data,setTotal){
    		var proid = data.PROID;
            var name = data.NAME;
            var price = data.PRICE;
            var num = parseInt(data.NUM);
            var imgurl = data.IMGURL;
            var guige = data.GUIGE;
            
            var cssStr = '';
            if(num == 1){
            	cssStr = 'style="background:#d1d0d0" disabled="disabled"';
            }
           	
            var htmlStr = "";
            htmlStr +=
			        '<section id="shoppingCar'+proid+'" class="shoppingCar w88 jz bcf flexBox of mgt10" style="padding:14px 2%">'
			        	+'<p id="guige_'+proid+'" style="display:none;">'+guige+'</p>'
			        	+'<div class="df">'
		        			+'<div  id="'+proid+'" onclick="dotToggle($(this));" class="circle sCarDot" style="flex-shrink:0"></div>'
							+'<div class="mgl3 sCarImg" style="flex-shrink:0">'
								+'<img src="'+getBaseImgUrl(imgurl)+'" class="db w100 h100">'
							+'</div>'
			        	+'</div>'
						+'<article class="mgl3" style="align-self: flex-start;height:90px;flex-grow: 2;">'
							+'<div class="flexBox h100" style="flex-direction:column;align-items: flex-start;">'
								+'<p class="c3 f14">'+name+'</p>'
								+'<div class="flexBox w100">'
									+'<p class="orange f15">&yen;<span id="price_'+proid+'">'+price+'</span></p>'
									+'<div class="countDivNum f16 c6">&times;'
											+ '<span id="num_'+proid+'">'+num+'</span>'
									+'</div>'
									+'<div class="countDivInput countDiv clearfix of flexCenter" style="margin:0;display:none;">'
										 +'<input class="min" id="minus'+proid+'" name="" type="button" value="-" '+cssStr+'  onclick="minCount($(\'#count_'+proid+'\'),$(this));">'
										  +'<input class="num_box" id="count_'+proid+'" name="" type="text" value="'+num+'" oninput="NumCheck(this)" class="count bcf tc">'
										  +'<input class="add" id="add'+proid+'" name="" type="button" value="+"  onclick="addCount($(\'#count_'+proid+'\'),$(\'#minus'+proid+'\'));">'
									+'</div>'
								+'</div>'
							+'</div>'
						+'</article>'
					+'</section>';
					
			 $("#resText").after(htmlStr);
			 
    }
    
    
    
    
    function editFunc(countDiv,countDiv2){
    	countDiv.hide();
    	countDiv2.show();
    	$("#editBtn").hide();
    	$("#finishBtn").show();
    	$("#bottomBtnTotal").hide();
    	$("#bottomBtnDelete").show();
    }
    
    /* 计算总价 */
    function setMoney(divs){
       priceAll=0;
       var num = "";
       var priceSingle = "";
    	divs.each(function(index,element){
    		num = $.trim($("#num_"+element.id).html());
    		priceSingle = $.trim($("#price_"+element.id).html());
    		console.log("计算总金额    "+num);
    		priceAll = priceAll + num * priceSingle;
    	});
    	
    	$("#MoneyTotal").html(priceAll);
    	
     	priceAll=0;
    }
    
    
     function finishFunc(countDiv,countDiv2){
     	$(".num_box").each(function(index,element){
     		var idVal = element.id.split("_")[1];
     		var newNum =  $(this).val();
     		     		
     		/* 修改数据 */
        	websqlUpdateAData(websqlTable,idVal,newNum); 
     		/* 显示数据 */
     		$("#num_"+idVal).html(newNum);
     		
     	});
     	
     	setMoney($(".sCarDotChexck"));
     	
    	countDiv.show();
    	countDiv2.hide();
    	$("#finishBtn").hide();
    	$("#editBtn").show();
    	$("#bottomBtnTotal").show();
    	$("#bottomBtnDelete").hide();
    }
    
	function dotToggle(div){
		div.toggleClass("sCarDot");
		div.toggleClass("sCarDotChexck");
		selectBtnState($("#selectAllBtn"));
		setMoney($(".sCarDotChexck")); 
	}
	
	

	
	/* 全选功能 */
	function selectAll(btn,divs){
		btn.toggleClass("sCarDot");
		btn.toggleClass("sCarDotChexckAll");
		
		if(btn.hasClass("sCarDotChexckAll")){
			divs.each(function(index,element){
				if( $(this).hasClass("sCarDot") ){
					$(this).removeClass("sCarDot");
					$(this).addClass("sCarDotChexck");
				}
			})
		}else{
			divs.each(function(index,element){
				if( $(this).hasClass("sCarDotChexck") ){
					$(this).removeClass("sCarDotChexck");
					$(this).addClass("sCarDot");
				}
			})
		}
		
		setMoney($(".sCarDotChexck"));
	}
	
	/* 全选按钮状态 */
	function selectBtnState(btn){
		if($(".sCarDotChexck").length == ($(".circle").length-1)){
			if(btn.hasClass("sCarDot")){
				btn.removeClass("sCarDot");
				btn.addClass("sCarDotChexckAll");
			}
		}
		else if($(".sCarDotChexck").length < ($(".circle").length) ){
			if(btn.hasClass("sCarDotChexckAll")){
				btn.removeClass("sCarDotChexckAll");
				btn.addClass("sCarDot");
			}
		}
	}
	
	
	//数量操作
 	function NumCheck(t){         
          var num = t.value;
          var re = /^[1-9]\d*$/;   //^匹配字符串开始位置   \d 匹配任意一个十进制数字，等价于[0-9]  * 匹配0次 1次或者多次前面的字符  $匹配字符串的结束位置  
          if(!re.test(num)||num == NaN||num == undefined){  
               t.value = "1";
     		}  
     }
     
      //数量增加操作
     function addCount(t,minBtn){
     	 t.val(parseInt(t.val())+1);
     	  if (parseInt(t.val())!=1){
	           minBtn.attr('disabled',false);
	            minBtn.css("background","#1074F1");
	    }
     }
     
      //数量减少操作
     function minCount(t,minBtn){
     	 t.val(parseInt(t.val())-1);
     	  if (parseInt(t.val())==1){
	           minBtn.attr('disabled',true);
	            minBtn.css("background","#d1d0d0");
	    }
     }
     
     
     /* 删除 */
     function deleteCar(divs){
     	if(divs.length>0){
     		console.log(divs.length);
	     	divs.each(function(index,element){
	     		var car = $("#shoppingCar"+element.id);
	     		/* 删除数据库数据 */
                websqlDeleteADataFromTable(websqlTable,element.id); 
	     		car.remove();
	     		
	     	});
     	}else{
     		showToast("您还未选择删除项");
     	}
     	
     }
     
     
      function buy(money,divs){
      
      		if(divs.length>0){
      		
      			//id组合
      			var projectidArr = "";
      			
      			//数量组合
      			var numArr = "";
      			
      			// 规格组合
      			var guigeArr ="";
      			
	      		divs.each(function(index,element){
	      		
		     		 projectidArr += element.id+"%2C"; 
		     		/*  projectidArr.push(element.id); */
		     		
		     		numArr += $("#num_"+element.id).html() + "%2C";
		     		
		     		if($("#guige_"+element.id).html()!=0){
		     			guigeArr += $("#guige_"+element.id).html()+ "#&";
		     			
		     		}else{
		           		guigeArr += " " + "#&";
		           	}
		           	
		     	});
		     	

		     	projectidArr=projectidArr.substr(0,projectidArr.length-3);
		     	guigeArr = guigeArr.substr(0,guigeArr.length-2);
		     	numArr = numArr.substr(0,numArr.length-3);
		     	
		     	console.log(projectidArr);
		     	console.log(guigeArr);
		     	console.log(numArr);
		     	
		     	window.location.href=  "mb/jsp/zhongchouxiadan.jsp?kind=1&priceAll="+$("#MoneyTotal").text()+"&projectidArr="+projectidArr+"&countNumArr="+numArr+"&guigeArr="+encodeURIComponent(encodeURIComponent(guigeArr));
	     	
      		}else{
      		
      			 showToast("您还为选择结算物品!");
      		}
      		
      		
	     	
	     	
        	//window.location.href= "mb/jsp/zhongchouxiadan.jsp?projectid="+projectidArr+"&selectextraVal="+encodeURIComponent(encodeURIComponent(guigeArr));
        }
</script>
</body>
</html>
